<template>
  <div class="container" ref="list">
    <div class="container-title border-bottom">门票<span class="tab-slider"></span></div>
    <div class="container-title border-bottom container-title-fixed" v-if="titleFixed">门票<span class="tab-slider"></span></div>
    <div class="item" v-for="(item, index) of list" :key="index">
      <div class="title border-bottom">
        <span class="icon"></span>
        <div>{{item.title}}</div>
      </div>
      <list-product :productList="item.children" />
    </div>
  </div>
</template>

<script>
import ListProduct from './list/Product'
export default {
  name: 'DetailList',
  props: {
    list: Array
  },
  data () {
    return {
      ticketShow: false,
      titleFixed: false,
      containerHeight: 0,
      scrollY: 0
    }
  },
  components: {
    ListProduct
  },
  watch: {
    list () {
      this.$nextTick(() => {
        this.containerHeight = this.$refs['list'].offsetHeight - 100
        this.scrollY = this.$refs['list'].offsetTop - 48
      })
    }
  },
  methods: {
    handleProductClick () {
      this.ticketShow = !this.ticketShow
    },
    handleScroll () {
      const top = document.documentElement.scrollTop
      if (top >= this.scrollY && top <= (this.containerHeight + this.scrollY)) {
        this.titleFixed = true
      } else {
        this.titleFixed = false
      }
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  .container-title
    position relative
    background-color #fff
    color #212121
    width 100%
    height .96rem
    line-height .96rem
    text-align center
    font-size .32rem
    display flex
    justify-content center
    .tab-slider
      position: absolute;
      bottom: 0;
      display: inline-block;
      height: .04rem;
      width: 1.4rem;
      background-color: #00bcd4;
  .item
    margin-bottom .2rem
    .title
      overflow hidden
      display flex
      flex-direction row
      position relative
      z-index 4
      padding 0 .2rem
      height .88rem
      background #fff
      color #333
      font-size .32rem
      line-height .88rem
      text-indent .4rem
      .icon
        display inline-block
        position absolute
        width .36rem
        height .36rem
        top .26rem
        left .2rem
        background url(//s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat
        margin-right .1rem
        background-size .4rem 3rem
  .container-title-fixed
    position fixed
    z-index 9
    top $headerHeight
</style>
